<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue'
import SwiperPart from '@/components/swiper-part/swiper-part.vue'
import { getHomeBanner, getHomeCategory, getHomeHot } from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import GoodsPart from '@/components/Goods-part/scroll-part.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import type { GoodsPartType } from '@/types/component'
import { ref } from 'vue'
import type { BannerResult, CategoryResult, HotResult } from '@/types'
// 轮播图列表
const bannerList = ref<BannerResult[]>([])
const getBannerList = async () => {
  const res = await getHomeBanner({ distributionSite: 1 })
  bannerList.value = res.result
}
// 获取分类列表
const categoryList = ref<CategoryResult[]>([])
const getCategoryList = async () => {
  const res = await getHomeCategory()
  categoryList.value = res.result
}
// 获取推荐专区列表
const hotList = ref<HotResult[]>([])
const getHotList = async () => {
  const res = await getHomeHot()
  hotList.value = res.result
  console.log('hotList', hotList.value)
}

onLoad(() => {
  // 获取轮播图列表
  getBannerList()
  getCategoryList()
  getHotList()
})

const scrollPartRef = ref<GoodsPartType>()
const onScroll = () => {
  scrollPartRef.value?.getMore()
}
// 下拉刷新
const isTrigger = ref(false)
const onRefresh = async () => {
  isTrigger.value = true
  await scrollPartRef.value?.resetData()
  await scrollPartRef.value?.getMore()
  isTrigger.value = false
}
</script>

<template>
  <scroll-view
    class="scroll-view"
    scroll-y
    :refresher-enabled="true"
    :refresher-triggered="isTrigger"
    @refresherrefresh="onRefresh"
    @scrolltolower="onScroll"
  >
    <!-- 自定义导航条 -->
    <CustomNavbar />
    <!-- 轮播图 -->
    <SwiperPart :bannerList="bannerList" />
    <!-- 分类 -->
    <CategoryPanel :categoryList="categoryList" />
    <!-- 推荐专区 -->
    <HotPanel :hotList="hotList" />
    <!-- 猜你喜欢 -->
    <GoodsPart ref="scrollPartRef" />
  </scroll-view>
</template>

<style lang="scss">
.scroll-view {
  height: 100vh;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
</style>
